<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue2.0</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script src="js/vue.js"></script>
	<script src="js/jquery-1.11.2.js"></script>
	<style>
     body{
	background: #eee;
     }
     .active{
	 font-size:25px;
     color:#fff;
     border:1px solid #ccc;
     background: #333;
     }
   </style>
</head>
<body> 
	 <div class="container" >
	     <div class="panel panel-default" id="app">
			  <div class="panel-body">
					   <h1>vue2.0 例子一 v-model数据双向绑定 与v-text显示文本 </h1>
					   
					   <p>{{message}}</p>
					   
					   <!-- 以下例子与上面{{message}}一样 没有任何不同 -->
					   <p v-text="message"></p>
					  <input type="text" v-model="message" />  <!-- 数据双向绑定 -->
			  </div>
		</div>
		
		<div class="panel panel-default" id="app2">
			  <div class="panel-body">
					   <h1>vue2.0 例子二 v-if条件判断 判断显示数据 </h1>
					   <p style="color:red;">(注： v-if 的指令结果 是直接删除或添加DOM元素 而  v-show  与之对应 但结果是显示或隐藏DOM元素)</p>
					  <p style="color:green;">(注：可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。)</p>
	
					   <input type="text" v-model="message" />
					     <span  v-if="message.length>= 3 && message.length<=8 " style="color:green;"> 正确。</span> <!--  如果v-if的值等于true则显示 -->
			             <span  v-else style="color:red;"> 请输入3到8位的数值。</span> 
			             
			             
			  </div>
		</div>
		
		 <div class="panel panel-default" id="app3">
			  <div class="panel-body">
					   <h1>vue2.0 例子三 v-for循环 列表遍历数据</h1>
					    <ul class="list-group">
					       <li class="list-group-item"  v-for="value in list"> {{ value.text }}</li><!-- 这里value是对象{} value.text获取 {text:"xxx"}的XXX值  -->
					    </ul>
			  </div>
		</div>
		
		<div class="panel panel-default" id="app4">
			  <div class="panel-body">
			   		<h1>vue2.0 例子三-二 v-for循环  表格遍历数据</h1>
			        <table class="table table-bordered">
			         <tr><th  v-for="valueth in th" > {{valueth}} </th></tr>
				     <tr v-for="valuetr in td"> <!-- 根据ted的数组下的对象数 遍历tr的个数 这里遍历了3个tr 根据trd下的对象数遍历的 -->
				     		<td  v-for=" valuetd in valuetr">{{ valuetd }}</td> <!-- valuetr得到是一个对象 并且valuetr在trd的for循环下 因此可以 XXXX in valuetr继续下层遍历  -->
				     </tr>
				     </table>
			  </div>
		</div>
			
		<div class="panel panel-default" id="app5">
			  <div class="panel-body">
					   <h1>vue2.0 例子四 v-on事件 事件触发方法</h1>
					    <p>{{ message }}</p>
					     <button v-on:click="userClick();">点击</button>
			  </div>
		</div>
       
       
       <div class="panel panel-default" id="app6">
			  <div class="panel-body">
					   <h1>vue2.0 例子五 v-bind绑定 绑定元素属性（动态）</h1>
					    <p>v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class
v-bind:argument="expression"</p>
					    <div v-bind:class="flag ?  'active' : ''  ">绑定元素</div>
					    <!-- 根据 app6.flag的值   如果是true 则class="active" 否则 "" -->
			  </div>
		</div>
		
		<div class="panel panel-default" id="app7">
			  <div class="panel-body">
					   <h1>vue2.0 例子六 v-html 解析html</h1>
					   <p>双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用</p>
                       <div v-html="message"></div>
			  </div>
		</div>
		
		<div class="panel panel-default" id="app8">
				<div class="panel-body">
					   <h1>vue2.0 例子七  watch监听事件 实例中data值的变化</h1>
					   <button v-on:click="countAdd">{{ message }} {{ count }}</button>
			  </div>
		
		</div>
		
		
	 </div>
</body>
</html>
<script>
var app = new Vue({
	  el: '#app',
	  data: {
	    message: 'Hello Word!'
	  }
	});

var app2 = new Vue({
	  el: '#app2',
	  data: {
	    message: ""
	  }
	});

var app3 = new Vue({
	  el: '#app3',
	  data: {
		  list: [   /*数据从数据库获取*/
	    ]
	  }
	});
var app4 = new Vue({
	  el: '#app4',
	  data: {     
		  th:[],     /*数据从JSON获取*/
		  td : [    /*第一层  遍历出三个数组*/   /*数据从JSON获取*/
		             /* 
		             第二次 数组里的数据
		             ["刘大海","51","男","15815811234","421416561","421416561@qq.com"],
		              ["王小兰","35","女","15914722147","147518234","147518234@163.com"],
		              ["李连杰","70","男","13822521427","367458154","367458154@Foxmail.com"]
		              */
		   ]
		 
	  }

	});

var app5 = new Vue({
	  el: '#app5',
	  data: {
		    message: 'Hello Vue.js!'
	  },
      methods:{
    	 "userClick":function(){
    		 this.message = "say Hello!";
    	 }
      }
	});
	
var app6 = new Vue({
	  el: '#app6',
	  data: {
		    flag: true,
	  }
	});
	
var app7 = new Vue({
	  el: '#app7',
	  data: {
		  message:  "<p style='color:red;'>Hello Word!</p>"
	  }
	});	
	
var app8 = new Vue({
	  el: '#app8',
	  data: {
		  message:  "点击试试",
		  count: 0
	  },
	  methods : {
		  countAdd : function(){
			  this.count++;
		  }
	  },
	  watch: {    //监听对象里的data  监听事件
		  count : function(newValue,oldValue){  //每当count的值变化时 触发函数
			  alert( "新的值：" + newValue + "旧的值：" +  oldValue );
		  }
	  }
	});		
</script>

<script>
$.ajax({
    "url":"getlist.php",          //发送地址 从数据库获取数据
    "type":"post",            //发送方式
    "dataType":"JSON",
    "data":{
    	token : "15819588170"
    },
    "success":function(response,status,xhr){       //返回的页面上的数据 获取数据库json数据 使用vue.js遍历在页面上
         for(var i = 0; i< response.length; i ++){
        	 app3.list.push({ text: response[i] });
         }
    },
    "error":function(xhr){
      alert(xhr.status + xhr.statusText);
    }
});

$.ajax({
    "url":"vipjson.json",          //发送地址 从数据库获取数据
    "type":"post",            //发送方式
    "dataType":"JSON",
    "success":function(response,status,xhr){       //返回的页面上的数据 获取数据库json数据 使用vue.js遍历在页面上
        //alert(response.th);
        for(var i in response['th']){
        	app4.th.push( response['th'][i] ); /*将th列名从json获取 并添加到app4.th的数据里*/
        }
        for(var k  in response['td']){
        	app4.td.push( response['td'][k] ); /*将th列名从json获取 并添加到app4.th的数据里*/
        }
    
    },
    "error":function(xhr){
      alert(xhr.status + xhr.statusText);
    }
});

</script>
